﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<PaperSystem.Models.LoginInfo>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>登录</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    ul,ol{list-style:none;}
    
    body{width:100%;height:100%;background:#407a98;font-size:14px;font-family:"Microsoft Yahei","宋体";}
    
    .logo_wrap{width:146px;height:58px;margin:40px auto;}
    .logo_blue{display:block;width:100%;height:100%;background:url(/Content/images/logo_blue.png) no-repeat;text-indent:-9999px;}
    
    .login_form{width:380px;height:186px;margin:20px auto 0;-webkit-border-radius:6px;border-radius:6px;background:#fff;padding:22px 0;}
    .input_wrap{width:332px;height:40px;margin:0 auto 14px;position:relative;cursor:pointer;}
    .input_wrap label{cursor:pointer;}
    .input_inner{background:url(/Content/images/login_bg.png) 0 0 no-repeat;}
    .input_inner_hover{background-position:0 -41px;}
    .input_inner input,
    .input_inner label{width:280px;height:20px;line-height:16px;position:absolute;top:10px;left:10px;color:#888;border:0;outline:none;font-size:14px;}
    
    .select_container{position:relative;width:332px;height:40px;margin:0 auto 14px;}
    .select_result{width:322px;height:40px;cursor:pointer;background:url(/Content/images/login_bg.png) 0 -82px no-repeat;padding:0 0 0 10px;line-height:40px;font-size:14px;color:#888;}
    .select_result_hover, .select_open{background-position:0 -123px;}
    .select_option{position:absolute;z-index:10;width:200px;cursor:pointer;background:#fff;border:1px solid #ddd;}
    .select_option li{height:30px;line-height:30px;border-bottom:1px solid #ddd;padding:0 20px;}
    .select_option li.select_option_hover{background:#f1f1f1;}
    
    .action_wrap{width:332px;height:40px;margin:0 auto;position:relative;}
    .action_wrap .error_wrap{width:200px;position:absolute;left:0;top:8px;font-size:12px;color:#eb3535;}
    .action_wrap .button_wrap{width:100px;height:40px;float:right;text-align:right;}
    .btn_login{display:inline-block;width:80px;height:32px;line-height:32px;text-align:center;color:#fff;background:#407a98;text-decoration:none;-webkit-border-radius:3px;border-radius:3px;
        -webkit-transition: background 0.3s ease-out;
           -moz-transition: background 0.3s ease-out;
             -o-transition: background 0.3s ease-out;
                transition: background 0.3s ease-out;
    }
    .btn_login:hover{background:#346a85;}
    
    </style>
</head>
<body>
<div class="logo_wrap"><a href="/" title="试题库系统" class="logo_blue">Do it,试题库系统</a></div>
    <form id="form1" runat="server" class="login_form">
    <div>
        <div class="input_wrap input_inner" for="user">
            <input type="text" name="user" id="user" autocomplete="off"/>
            <label id="Label1" for="user">账号</label>
        </div>
        <div class="input_wrap input_inner" for="password">
            <input type="password" name="password" id="password" autocomplete="off" />
            <label id="Label2" for="password">密码</label>
        </div>
        
        <div class="select_container">
            <% SelectList list = ViewData["list"] as SelectList; %>
	        <div class="select_result"><%=Html.Encode(list.FirstOrDefault().Value)%></div>
	        <ul class="select_option" style="display:none;">
	        <%foreach (SelectListItem item in list){ %>
		        <li><%=Html.Encode(item.Value) %></li>
		    <%} %>
	        </ul>
        </div>
        <input type="hidden" id="role_input" name="role" value="<%=Html.Encode(list.FirstOrDefault().Value)%>"/>
        
        <div class="action_wrap">
            <%if (ViewData["errorMessage"] != null)
              //错误信息
                { %>
                <div class="error_wrap">
                    <span class="error"><%=ViewData["errorMessage"].ToString() %></span>
                </div>
             <%} %>
             <%if (TempData["errorMessage"] != null)
              //错误信息
                { %>
                <div class="error_wrap">
                    <span class="error"><%=TempData["errorMessage"].ToString() %></span>
                </div>
             <%} %>
             <!--
            <div class="list_wrap">
                <%=Html.DropDownList("role", ViewData["list"] as SelectList)%>
            </div>
            -->
            <div class="button_wrap">
                <a href="#" onclick="document.getElementById('form1').submit();" class="btn_login">登录</a>
            </div>
        </div>
    </div>
    </form>
    
     

    <script type="text/javascript" src="/Scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/Scripts/Selecter.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //初始时如果有值就不要label
            setTimeout(function() {
                $('.input_inner input').each(function(index, elem) {
                    if ($(elem).val() != '') {
                        $(elem).siblings('label').hide();
                    }
                });
            }, 100);

            //输入框的动作
            $('.input_inner').on('click', function(evt) {
                $(this).find('label').hide();
                $(this).find('input').focus();
            })
            .hover(
                function() {
                    $(this).addClass('input_inner_hover');
                },
                function() {
                    $(this).removeClass('input_inner_hover');
                }
            );
            $('.input_inner input').on('focus', function(evt) {
                $(this).siblings('label').hide();
            })
            .on('blur', function(evt) {
                if ($(this).val() == '') {
                    $(this).siblings('label').show();
                }
            });

            //选择框
            $('.select_container').selecter({
                "container": ".select_container",
                "result": ".select_result",
                "option": ".select_option",
                "onChange": function(txt) {
                    $('#role_input').val(txt);
                }
            });
        });
    </script>
</body>
</html>
